<template>
	<div class="home">
		<div class="header">
			<img src="../image/logo.png" alt="" class="img1">
			<div class="mine">
				<b class="username">{{ username }}</b>
				<b class="quit" @click="dialogVisible = true">退出</b>
			</div>
		</div>
		<div class="content">
			<div class="nav">
				<router-link class="navlist" v-for="(x,index) in leftMenu" :key="index" :to="x.path">
					<div style="display: flex; align-items: center;">
						<p class="icon" :class="getnavs(x.menuName)"></p>
						<span style="min-height: 50px; line-height: 50px;">{{ x.menuName }}</span>
						<img src="../image/expand.png" class="arrow" v-if="x.childs!=undefined" @click="changetab1(x)"/>
					</div>
						<div class="bigopenbox">
							<div v-if="x.menuId==2 ? navFlag2 :navFlag" class="openbox">
								<router-link :to="y.path" v-for="(y,index) in x.childs" :key="index">{{ y.menuName }}</router-link>
							</div>
						</div>
				</router-link>
				<img src="../image/illustration.png" alt="" class="footerImg">
			</div>
			<div class="left">
				<router-view></router-view>
			</div>
		</div>
		<el-dialog title="确定要退出吗？" :visible.sync="dialogVisible" width="30%"  center>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quit()">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>

export default {
	data() {
		return {
			username: "",
			navFlag: false,
			navFlag2: false,
			baseUrl:require("../js/baseUrl.js").baseUrl,
			roleIds:[],
			leftMenu:[],
			userId:0,
			dialogVisible:false
		}
	},
	methods: {
		
		quit() {
			this.$http.post(this.baseUrl+"SchoolSys/user/logout",{
				userId:this.userId
			}).then(res=>{
				
				if(res.data.code==200){
					this.$message.success("退出成功")
					setTimeout(() => {
						sessionStorage.clear()
						this.$router.push("/login")
					}, 500);
				}else{
					sessionStorage.clear()
					this.$router.push("/login")
				}
			})
		
			
		},
		changetab1(v){
			// this.navFlag2=!this.navFlag2
			if(v.menuId==2){
				this.navFlag2=!this.navFlag2
			}else{
				this.navFlag=!this.navFlag
			}
		},
		changtab2(){
			this.navFlag=!this.navFlag
		},
		getfindMenu(){
				this.$http.post(this.baseUrl+"SchoolSys/menu/findMenu",{
					roleIds:this.roleIds
				}).then(res=>{
					if(res.data.code==200){
						this.leftMenu=res.data.data
					}

				})
		},
		getnavs(menuName){
			switch(menuName){
				case "首页":return 'home';break;
				case "用户管理":return 'user';break;
				case "菜单管理":return 'menu';break;
				case "审批管理":return 'approval';break;
				case "课程管理":return 'lessonmanager';break;
				case "请假管理":return 'leave';break;
				case "班级管理":return 'classmanager';break;
				case "教师管理":return 'teachermanager';break;
				case "学生管理":return 'studentmanager';break;
				
			}
		}
	},
	mounted() {
		this.roleIds.push(sessionStorage.getItem('roleId'))
		this.username = sessionStorage.getItem("userName")
		this.userId=sessionStorage.getItem("userId")
		this.getfindMenu()
	
	},
	
}

// window.addEventListener("beforeunload",function(){
// 	localStorage.setItem("user",Math.random)
	
// })
</script>
<style lang="less">
* {
	padding: 0;
	margin: 0;
}
.home {
	position: relative;
}

.home .mine {
	display: flex;
	align-items: center;
	margin-right: 10px;
}

.home .mine img {
	width: 40px;
	height: 40px;
	margin: 0 8px;
}

.home .header {
	position: fixed;
	top: 0;
	left: 0;
	background: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 80px;
	z-index: 100;

	.username {
		margin-left: 10px;
		margin-right: 40px;
	}
	.img1{
		width: 180px;
		margin: 20px;
	}
	.quit {
		cursor: pointer;
		margin-right: 40px;
	}
}

.home .nav .home{
	background: url(../image/HomePageOff.png);
	background-size: contain;
}
.home .nav .router-link-active .home{
	background: url(../image/HomePageOn.png);
	background-size: contain;
}
.home .nav .user{
	background: url(../image/USEROff.png);
	background-size: contain;
}
.home .nav .router-link-active .user{
	background: url(../image/USEROn.png);
	background-size: contain;
}
.home .nav .menu{
	background: url(../image/MenuOff.png);
	background-size: contain;
}
.home .nav .router-link-active .menu{
	background: url(../image/MenuOn.png);
	background-size: contain;
}
.home .nav .approval{
	background: url(../image/shenpiOff.png);
	background-size: contain;
}
.home .nav .router-link-active .approval{
	background: url(../image/shenpiOn.png);
	background-size: contain;
}
.home .nav .lessonmanager{
	background: url(../image/kechengOff.png);
	background-size: contain;
}
.home .nav .router-link-active .lessonmanager{
	background: url(../image/kechengOn.png);
	background-size: contain;
}
.home .nav .leave{
	background: url(../image/qingjiaOff.png);
	background-size: contain;
}
.home .nav .router-link-active .leave{
	background: url(../image/qingjiaOn.png);
	background-size: contain;
}
.home .nav .classmanager{
	background: url(../image/ClassOff.png);
	background-size: contain;
}
.home .nav .router-link-active .classmanager{
	background: url(../image/ClassOn.png);
	background-size: contain;
}
.home .nav .teachermanager{
	background: url(../image/TeacherOff.png);
	background-size: contain;
}
.home .nav .router-link-active .teachermanager{
	background: url(../image/TeacherOn.png);
	background-size: contain;
}
.home .nav .studentmanager{
	background: url(../image/StudentOff.png);
	background-size: contain;
}
.home .nav .router-link-active .studentmanager{
	background: url(../image/StudentOn.png);
	background-size: contain;
}
.home .nav .arrow {
	position: absolute;
	right: -10%;
	top: 18px;
	width: 15px;
	height: 15px;
}

.home .nav .openbox{
	a{
		display: block;
		text-decoration: none;
		color: black;
		margin: 5px 0;
		margin-left: 36%;
		font-size: 13px;
	}
}
.home .nav {
	min-width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	flex: 1.5;
	position: relative;
	margin-top: 20px;
	.router-link-active {
	color: #4a9ffe !important;
}
	.navlist {
		text-decoration: none;
		color: black;
		position: relative;
		width: 120px;
			.icon{
				width: 25px;
				height: 25px;
				margin: 0 10px;
			}
		}
		.footerImg{
			width: 80%;
		}
}

.home .content {
	padding-top: 10vh;
	display: flex;
	min-height: 90vh;
}

.home .content .left {
	flex: 7;
	background: #f3f8fd;
	position: relative;
	min-width: 1200px;
}


.fade-enter,
.fade-leave-to {
	opacity: 0;
	height: 0;
}

.left .el-button i {
	margin-top: 0;
}
.home .nav .navlist .icon{
	width: 20px;
	height: 20px;
}
</style>